-
Notifications
You must be signed in to change notification settings - Fork 222
Update Storybook to 10 and fix lint errors #4287
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
Bumps the storybook group in /extensions/ql-vscode with 7 updates: | Package | From | To | | --- | --- | --- | | [@storybook/addon-a11y](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/a11y) | `9.1.17` | `10.2.1` | | [@storybook/addon-docs](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/docs) | `9.1.17` | `10.2.1` | | [@storybook/addon-links](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/links) | `9.1.17` | `10.2.1` | | [@storybook/icons](https://github.com/storybookjs/icons) | `1.6.0` | `2.0.1` | | [@storybook/react](https://github.com/storybookjs/storybook/tree/HEAD/code/renderers/react) | `9.1.17` | `10.2.1` | | [@storybook/react-vite](https://github.com/storybookjs/storybook/tree/HEAD/code/frameworks/react-vite) | `9.1.17` | `10.2.1` | | [storybook](https://github.com/storybookjs/storybook/tree/HEAD/code/core) | `9.1.17` | `10.2.1` | Updates `@storybook/addon-a11y` from 9.1.17 to 10.2.1 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v10.2.1/code/addons/a11y) Updates `@storybook/addon-docs` from 9.1.17 to 10.2.1 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v10.2.1/code/addons/docs) Updates `@storybook/addon-links` from 9.1.17 to 10.2.1 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v10.2.1/code/addons/links) Updates `@storybook/icons` from 1.6.0 to 2.0.1 - [Release notes](https://github.com/storybookjs/icons/releases) - [Changelog](https://github.com/storybookjs/icons/blob/main/CHANGELOG.md) - [Commits](storybookjs/icons@v1.6.0...v2.0.1) Updates `@storybook/react` from 9.1.17 to 10.2.1 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v10.2.1/code/renderers/react) Updates `@storybook/react-vite` from 9.1.17 to 10.2.1 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v10.2.1/code/frameworks/react-vite) Updates `storybook` from 9.1.17 to 10.2.1 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v10.2.1/code/core) --- updated-dependencies: - dependency-name: "@storybook/addon-a11y" dependency-version: 10.2.1 dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/addon-docs" dependency-version: 10.2.1 dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/addon-links" dependency-version: 10.2.1 dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/icons" dependency-version: 2.0.1 dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/react" dependency-version: 10.2.1 dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/react-vite" dependency-version: 10.2.1 dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: storybook dependency-version: 10.2.1 dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook ... Signed-off-by: dependabot[bot] <support@github.com>
This commit updates TypeScript compiler options in Storybook-related configuration files to support Storybook 10.x's module resolution requirements. Problem: Storybook 10.x changed its package structure to use subpath exports (e.g., 'storybook/manager-api', 'storybook/theming'). These subpath exports require modern TypeScript module resolution strategies to work correctly. The legacy 'node' module resolution strategy doesn't understand package.json 'exports' fields, causing TypeScript to fail resolving Storybook imports. Changes: - Changed moduleResolution from 'node' to 'bundler' in both .storybook/tsconfig.json and src/stories/tsconfig.json - Added 'allowImportingTsExtensions: true' to support TypeScript extension imports in bundler mode - Added 'noEmit: true' since these configs are for type-checking only, not compilation This fixes the underlying module resolution issues that were causing ESLint's TypeScript parser to fail during the lint-ci step. Files modified: - extensions/ql-vscode/.storybook/tsconfig.json - extensions/ql-vscode/src/stories/tsconfig.json
This commit removes redundant 'await' keywords inside a Promise.all()
call that were causing ESLint errors.
Problem:
ESLint rule '@typescript-eslint/await-thenable' detected that the code
was using 'await' on expressions that were already being passed to
Promise.all(). This is redundant and incorrect:
await Promise.all([
await this.cli.bqrsDecode(...), // ❌ redundant await
await this.cli.bqrsDecode(...), // ❌ redundant await
await this.cli.bqrsDecode(...), // ❌ redundant await
]);
The 'await' inside the array causes each promise to be awaited
sequentially before being added to the array, defeating the purpose
of Promise.all() which is to run them in parallel. ESLint's stricter
type checking (enabled by the Storybook 10 upgrade) now catches this.
Solution:
Remove the redundant 'await' keywords inside the Promise.all() array.
The outer 'await Promise.all(...)' is sufficient:
await Promise.all([
this.cli.bqrsDecode(...), // ✓ returns Promise
this.cli.bqrsDecode(...), // ✓ returns Promise
this.cli.bqrsDecode(...), // ✓ returns Promise
]);
This fixes 3 ESLint errors:
src/language-support/ast-viewer/ast-builder.ts:36:7
src/language-support/ast-viewer/ast-builder.ts:37:7
src/language-support/ast-viewer/ast-builder.ts:38:7
File modified:
- extensions/ql-vscode/src/language-support/ast-viewer/ast-builder.ts
This commit fixes incorrect usage of Promise.all() where non-Promise
values were being passed, causing ESLint errors.
Problem:
The restartQueryServer command was passing an array to Promise.all()
containing:
1. A Promise (queryRunner.restartQueryServer)
2. Either a Promise or an empty object {} (conditional expression)
3. An async function (not invoked, so not a Promise)
ESLint rule '@typescript-eslint/await-thenable' detected this error:
src/extension.ts:200:11
Unexpected iterable of non-Promise (non-"Thenable") values passed
to promise aggregator
The issues were:
- Line 199: Using `{}` as a fallback instead of a resolved Promise
- Line 200: Declaring an async function but not invoking it (missing
the `()` to actually call the function and get its Promise)
Solution:
1. Replace `{}` with `Promise.resolve()` to maintain type consistency
2. Wrap the async function in an IIFE (Immediately Invoked Function
Expression) by adding `()` at the end: `(async () => { ... })()`
This ensures Promise.all() receives an array of actual Promise objects,
allowing it to properly await all operations in parallel.
File modified:
- extensions/ql-vscode/src/extension.ts
This commit fixes incorrect type signatures and Promise handling for
query server event handlers that were causing ESLint errors.
Problem:
The queryServerStartListeners were typed to return 'void', but actual
usage in the codebase shows they can be async functions returning
'Promise<void>'. This mismatch caused two issues:
1. Type mismatch: The onStart() method in query-runner.ts accepts
callbacks typed as '(progress) => Promise<void>', but the listener
registration was typed as '(progress) => void'
2. ESLint error at line 163: When calling Promise.all() on the array
of handler results, ESLint detected that handlers might return void
instead of Promise, triggering '@typescript-eslint/await-thenable':
'Unexpected iterable of non-Promise values passed to promise
aggregator'
Solution:
1. Update type signatures to allow both synchronous (void) and
asynchronous (Promise<void>) handlers:
- Changed listener array type from '() => void' to
'() => void | Promise<void>'
- Updated onDidStartQueryServer parameter type to match
2. Wrap handler invocations in Promise.resolve() to ensure they always
return a Promise, regardless of whether the handler is sync or async:
- Changed: handler(progress)
- To: Promise.resolve(handler(progress))
This makes Promise.all() safe to use with mixed sync/async handlers
while maintaining backward compatibility with existing code.
File modified:
- extensions/ql-vscode/src/query-server/query-server-client.ts
This commit fixes incorrect usage of Promise.all() where the mapped
array could contain undefined values mixed with Promises, causing
ESLint errors.
Problem:
The downloadDatabaseUpdateFromGitHub function was passing an array to
Promise.all() where map callbacks could return either:
- undefined (when no update is found for a database)
- A Promise<void> (from the withProgress call)
ESLint rule '@typescript-eslint/await-thenable' detected this error at
line 172: 'Unexpected iterable of non-Promise (non-"Thenable") values
passed to promise aggregator'
The code pattern was:
await Promise.all(
selectedDatabases.map((database) => {
const update = updates.find(...);
return; // ❌ returns undefined
}
return withProgress(...); // ✓ returns Promise
})
);
This creates an array like [Promise, undefined, Promise, undefined]
which violates Promise.all()'s type contract expecting all Promises.
Solution:
1. Change early return from 'return;' to 'return undefined;' for
explicit clarity
2. Filter out undefined values before passing to Promise.all() using a
type guard:
.filter((p): p is Promise<void> => p !== undefined)
This ensures Promise.all() receives only actual Promise objects while
maintaining the same runtime behavior (skipping databases without
updates).
File modified:
- extensions/ql-vscode/src/databases/github-databases/updates.ts
This commit fixes TypeScript type errors in view components caused by
breaking changes in the @vscode-elements/react-elements library that
was updated as part of the Storybook 10 upgrade.
Problem:
The @vscode-elements/react-elements library changed its event handler
types and component prop APIs:
1. Event handlers now expect native DOM Event types (Event, InputEvent)
instead of React's synthetic event types (ChangeEvent<T>). The
library uses Lit web components which emit native events, not React
synthetic events.
2. VscodeButton's API changed from `appearance="primary"` to
`secondary={false}` for primary button styling.
3. Component refs must use specific element types (HTMLDivElement)
instead of generic HTMLElement | undefined.
TypeScript Errors Fixed:
- 11 event handler type mismatches where code used ChangeEvent or
InputEvent when Event was expected
- 1 VscodeButton prop error (appearance doesn't exist)
- 4 ref type errors (HTMLElement | undefined vs HTMLDivElement)
Changes by Category:
Event Handler Fixes:
- CodeFlowsDropdown.tsx: Changed ChangeEvent<HTMLSelectElement> to Event
- ModelTypeTextbox.tsx: Changed ChangeEvent<HTMLSelectElement> to InputEvent
- ModelAlertsSort.tsx: Changed InputEvent to Event
- RepositoriesFilter.tsx: Changed InputEvent to Event
- RepositoriesResultFormat.tsx: Changed InputEvent to Event
- RepositoriesSort.tsx: Changed InputEvent to Event
- RepoRow.tsx: Changed ChangeEvent<HTMLInputElement> to Event
All event handlers now cast e.target to the appropriate element type
(HTMLSelectElement, HTMLInputElement) to access properties like .value
and .checked.
Component API Fixes:
- VariantAnalysisActions.tsx: Changed `appearance="primary"` to
`secondary={false}` on VscodeButton
Ref Type Fixes:
- DataGrid.tsx: Changed DataGridRow and DataGridCell ref types from
`React.Ref<HTMLElement | undefined>` to `React.Ref<HTMLDivElement>`
- TextButton.tsx: Made $size prop optional in styled component
- MethodRow.tsx: Changed ModelableMethodRow and UnmodelableMethodRow
forwardRef types from `HTMLElement | undefined` to `HTMLDivElement`,
and changed useRef from `useRef<HTMLElement | undefined>(undefined)`
to `useRef<HTMLDivElement>(null)`
These changes align the codebase with the updated @vscode-elements
library APIs while maintaining the same runtime behavior.
Files modified:
- extensions/ql-vscode/src/view/common/CodePaths/CodeFlowsDropdown.tsx
- extensions/ql-vscode/src/view/common/DataGrid.tsx
- extensions/ql-vscode/src/view/common/TextButton.tsx
- extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx
- extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
- extensions/ql-vscode/src/view/model-editor/ModelTypeTextbox.tsx
- extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx
- extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx
- extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx
- extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx
- extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR updates Storybook from version 9.1.17 to 10.2.1 and addresses the TypeScript lint errors that arose from the update, particularly from API changes in @vscode-elements.
Changes:
- Updated Storybook and related packages from version 9 to version 10
- Fixed TypeScript configuration for Storybook 10.x compatibility (moduleResolution: "bundler")
- Fixed redundant await keywords in Promise.all calls that defeated parallelism
- Updated event handler types from ChangeEvent/InputEvent to Event for @vscode-elements components
- Changed VscodeButton API from appearance="primary" to secondary={false}
- Updated ref types from HTMLElement | undefined to HTMLDivElement for improved type safety
Reviewed changes
Copilot reviewed 18 out of 19 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updated Storybook dependencies from 9.1.x to 10.2.1 |
| package-lock.json | Updated dependency tree for Storybook 10.2.1 and related packages |
| .storybook/tsconfig.json | Changed moduleResolution to "bundler" for Storybook 10 subpath exports |
| src/stories/tsconfig.json | Changed moduleResolution to "bundler" for Storybook 10 subpath exports |
| src/language-support/ast-viewer/ast-builder.ts | Removed redundant await keywords inside Promise.all array |
| src/extension.ts | Fixed non-Promise values passed to Promise.all (empty object and uninvoked async function) |
| src/query-server/query-server-client.ts | Updated event handler types to support both void and Promise return types |
| src/databases/github-databases/updates.ts | Fixed mixed undefined/Promise values with explicit returns and type guard filter |
| src/view/variant-analysis/VariantAnalysisActions.tsx | Changed VscodeButton appearance="primary" to secondary={false} |
| src/view/variant-analysis/RepositoriesSort.tsx | Changed event handler type from InputEvent to Event |
| src/view/variant-analysis/RepositoriesResultFormat.tsx | Changed event handler type from InputEvent to Event |
| src/view/variant-analysis/RepositoriesFilter.tsx | Changed event handler type from InputEvent to Event |
| src/view/variant-analysis/RepoRow.tsx | Changed event handler type from ChangeEvent to Event with explicit target casting |
| src/view/model-editor/ModelTypeTextbox.tsx | Changed event handler from ChangeEvent to InputEvent with HTMLInputElement cast |
| src/view/model-editor/MethodRow.tsx | Updated ref types from HTMLElement | undefined to HTMLDivElement |
| src/view/model-alerts/ModelAlertsSort.tsx | Changed event handler type from InputEvent to Event |
| src/view/common/TextButton.tsx | Made $size prop optional in styled component to match interface |
| src/view/common/DataGrid.tsx | Updated ref types from HTMLElement | undefined to HTMLDivElement |
| src/view/common/CodePaths/CodeFlowsDropdown.tsx | Changed event handler type from ChangeEvent to Event |
Files not reviewed (1)
- extensions/ql-vscode/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
nickrolfe
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice! I don't know TS very well, but the changes look plausible.
Closes #4278
The dependabot update from Storybook 9 to 10 caused a bunch of CI checks to fail. This PR combines the dependabot update with the needed changes. I've checked locally that Storybook builds and displays correctly.
Authored with Copilot. Commit-by-commit reviewing is recommended.
Commits
Bump the storybook group in /extensions/ql-vscode with 7 updates
Fix TypeScript config for Storybook 10.x compatibility
.storybook/tsconfig.json,src/stories/tsconfig.jsonmoduleResolution: "bundler"instead of"node"allowImportingTsExtensionsandnoEmitflagsFix redundant await in Promise.all in ast-builder
src/language-support/ast-viewer/ast-builder.ts@typescript-eslint/await-thenable(lines 36-38)Promise.all([await x, await y])defeats parallelismFix non-Promise values in Promise.all in extension.ts
src/extension.ts@typescript-eslint/await-thenableat line 200{}and an uninvoked async function toPromise.all(){}toPromise.resolve()and invoked async function with()Fix event handler type and Promise handling in query-server-client
src/query-server/query-server-client.ts@typescript-eslint/await-thenableat line 163voidorPromise<void>void | Promise<void>and wrapped calls inPromise.resolve()Fix mixed undefined/Promise values in Promise.all in updates.ts
src/databases/github-databases/updates.ts@typescript-eslint/await-thenableat line 172undefinedorPromise<void>undefinedvalues with type guardFix TypeScript type errors for @vscode-elements API changes
ChangeEvent/InputEvent→Event)VscodeButton appearance="primary"tosecondary={false}HTMLElement | undefined→HTMLDivElement)